<template>
    <div id="navbar">
        <van-nav-bar title="网易云音乐" fixed class="navbar">
            <template #left>
                <van-cell @click="showPopup" class="user">
                    <van-icon name="bars" size="24" />
                </van-cell>
                <van-popup v-model="show" position="left" :style="{ height: '100%', width: '70%' }">
                    <van-cell-group>
                        <van-cell :border="false" />
                        <van-cell :border="false" />
                        <div class="login">
                            <div class="img">
                                <van-icon name="user-circle-o" size="30" />
                            </div>
                            <span>请登录</span>
                        </div>
                        <van-cell-group inset>
                            <van-cell :border="false" />
                            <van-cell title="成为黑胶VIP" is-link icon="vip-card-o" />
                            <van-cell title="我的消息" is-link icon="envelop-o" />
                            <van-cell title="我的收藏" is-link icon="star-o" />
                        </van-cell-group>
                    </van-cell-group>
                </van-popup>
            </template>
            <template #right>
                <van-icon name="plus" size="24" />
            </template>
        </van-nav-bar>
    </div>
</template>


<script>
export default {
  data() {
    return {
    //   count: 0,
      show: false,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
  },
}
</script>




<style scoped>
.navbar {
    background-color: rgb(174, 25, 25);
}

.van-icon-bars:before {
    color: white;
}

.van-icon-plus:before {
    color: white;
}

#navbar /deep/ .van-nav-bar__title {
    color: white !important;
}

.user {
    padding: 0;
}

.van-nav-bar__left>.van-cell {
    background-color: rgb(174, 25, 25);
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.block {
    width: 120px;
    height: 120px;
    background-color: #fff;
}

.van-cell__title:first-child>span {
    text-align: center;
}

.van-cell__title {
    text-align: left;
}
</style>
